<!--  -->
<template>
  <div class="recommend">
    <a
      class="recommend-item"
      v-for="(item, index) in list"
      :key="index"
      :href="item.url"
    >
      <div class="item-img"><img :src="item.imgUrl" :alt="index" /></div>
      <p class="item-text">{{ item.text }}</p>
    </a>
  </div>
</template>

<script scoped>
export default {
  name: "",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  components: {}
};
</script>

<style>
.recommend {
  background: #fff;
  margin-bottom: 10px;
  /* border-bottom: 10px solid #ccc; */
}
.recommend,
.recommend-item {
  display: flex;
  justify-content: center;
  align-content: center;
}
.recommend-item {
  flex: 1;
  flex-direction: column;
  text-align: center;
  margin: 20px 10px;
}
.recommend-item .item-img {
  flex: 8;
  border-radius: 14%;
  overflow: hidden;
  margin-bottom: 4px;
}
.recommend-item .item-text {
  flex: 2;
}
.recommend-item img {
  width: 100%;
  height: 100%;
}
</style>
